<template>
  <div class="workContent">
    <div class="workItem" @click="distributionMap(xtmkArr[index], index)" v-for="(item, index) in datalist" :key="index">
      <text class="icon-text" :style="{fontFamily: 'wxcIconFont'}" :class="[activeIndex == index ? 'active'  : '']">{{iconList[index]}}</text>
      <text class="text" :class="[activeIndex == index ? 'active'  : '']">{{item}}</text>
    </div>
  </div>
</template>
<script>
import { addIconFontSupport, getIconFontPath } from '@/config/iconConfig.js';
import { getCache } from '@/util/storageUtils';
import { CTCE_DATALIST, CTCE_USER_INFO } from '@/config/storageTypes';
import Config from '@/config/workIconConfig.js';
import qs from 'qs'
import { webUrl } from '@/config'

const dom = weex.requireModule('dom');
export default {
  name: 'workCont',
  data () {
    return {
      pIndexKey:'',
      datalist: [],
      xtmkArr: [],
      iconList: Config.workIcon,
      iconStyle: Config.tabIconFontStyles,
      activeIndex: null
    } 
  },
  created () {
    getCache(CTCE_DATALIST).then(res => {
      this.data = JSON.parse(res)
      for (let i = 0, len = this.data.length; i < len; i++) {
        if(this.data[i].DISPMKXZ === '03'){
          this.datalist.push(this.data[i].TITLE)
          this.xtmkArr.push(this.data[i].XTMK)
        }
      }
    })
    addIconFontSupport(dom, "../../")
  },
  methods: {
    distributionMap (XTMK_Id, index) {
      this.activeIndex = index;
      switch(XTMK_Id) {
        case '0901':
          getCache(CTCE_USER_INFO).then(res => {
            const param = qs.stringify(JSON.parse(res))
            this.$router.toWebView({
              url: `${webUrl}projectDisMap.html?${param}`,
              title: '工程分布图',
              navShow: true
            })
          })
        break;
        case '1710': // 台账汇总
          this.$router.open({
            name: 'ledgerHome'
          })
        break;
        case '1720': // 安装进度
          this.$router.open({
            name: 'ipHome'
          })
        break;
        case '1702': // 施工进度
          this.$router.open({
            name: 'summary'
          })
        break;
        case '1713': // 厂家完成情况
          this.$router.open({
            name: 'comHome'
          })
        break;
        case '1721': // 用能供暖
          this.$router.open({
            name: 'ehHome'
          })
        break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../config/styles";

.workContent{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 50px;
  @include border(1px, solid, $--theme-border, top);
}
.workItem{
  width: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 50px 0;
  @include border(1px, solid, $--theme-border, right);
  @include border(1px, solid, $--theme-border, bottom);
}
.active{
  color: rgba(62,175,252,1);
}
.text{
  font-size:29.1px;
  font-family:PingFangSC-Semibold;
  color:rgba(151,151,151,1);
  padding-top: 23px;
}
.icon-text {
  font-size: 70px;
  color: rgba(204,204,204,1);
}
</style>
